.calendar-container {
    width           : 100%;
    background-color: #fff;
    padding         : 20px;
    font-size       : 14px;
    color           : #333;
    position        : relative;
    padding-bottom  : 30px;
	box-sizing: border-box;
	
	.calendar-bg-month{
		font-size: 200px;
		font-weight: bold;
		color: #999;
		opacity: 0.1;
		text-align: center;
		line-height: 1;
		position: absolute;
		top: 50%;
		width: 88%;
		margin-top: -100px;
	}
}

.calendar-date {
    padding: 10px;
    color  : #999;
}
.my-expand-swipe{
	height: 750rpx;
}
.my-not-expand-swipe{
	height: 150rpx;
}
.weekend-row {
	flex-direction: row;
    display           : flex;
    // justify-content: center;

    .weekend-col {
        color     : #999;
        width     : 14%;
        text-align: center;

        &:not(:first-child) {
            // margin-left: 10px;
        }
    }
}

.date-row {
    flex-wrap: wrap;
    position : relative;

    .date-col {
        width        : 14%;
        text-align   : center;
        padding      : 11px 0;
        font-size    : 18px;
        position     : relative;
        margin       : 15px 0 0 0;
        border-radius: 100px;
		z-index: 10000;
    }

    .date-col-active {
        background-color: #2D8DFF;
        color           : white;

        & ::v-deep .circle-detail {
            stroke: '#2D8DFF'
        }
    }
}

.circle-svg {
    position : absolute;
    top      : 0px;
    height   : 50px;
    transform: rotate(270deg);
}
.circle-canvas{
	position : absolute;
	top      : 0px;
}
.icon-footer-container {
    position  : absolute;
    bottom    : -5px;
    width     : 100%;
    text-align: center;
    padding   : 10px 0;
    left      : 0;
    color     : #2D8DFF;
}

.not-current-month {
    color: #999;
}